<v-bottom-sheet v-model="show" v-resize="resize">
  <v-card text style="margin: auto; touch-action: none; user-select: none;">
    <v-container fluid grid-list-md text-xs-center :style="{width:Math.min(width, height * 0.6) + 'px'}">
      <v-layout
        row
        wrap
        justify-center
        align-center
        :style="{'padding-top':size * 0.2 + 'px', 'padding-bottom':size * 0.2 + 'px'}"
      >
        <v-flex xs12 style="display: flex;">
          <v-btn
            @click="data.dark=!data.dark; data.save();"
            :color="data.dark?'primary':''"
            depressed
            style="text-transform: none; min-width: 0%; flex: 1;"
            :height="size * 0.8"
            :style="{'font-size':size * 0.4 + 'px', 'margin-left':size * 0.1 + 'px', 'margin-right':size * 0.1 + 'px'}"
          >
            夜间模式
          </v-btn>
        </v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex
          v-for="(item, index) in colors"
          :key="index"
          xs6
          :style="{padding:size * 0.06 + 'px'}"
          v-show="index!=='Gray'"
        >
          <v-btn
            @click="tap(index)"
            :color="item"
            block
            depressed
            :height="size * 0.8"
            :style="{'font-size':size * 0.3 + 'px'}"
            >{{index}}
          </v-btn>
        </v-flex>
      </v-layout>
      <v-layout row wrap justify-center align-center>
        <v-flex xs12 style="display: flex;">
          <v-btn
            @click="show=false;"
            color="primary"
            text
            style="text-transform: none; min-width: 0%; flex: 1;"
            :height="size * 0.8"
            :style="{'font-size':size * 0.3+'px'}"
          >
            确定
          </v-btn>
          <v-btn
            @click="reset"
            color="error"
            text
            style="text-transform: none; min-width: 0%; flex: 1;"
            :height="size * 0.8"
            :style="{'font-size':size * 0.3+'px'}"
          >
            重置
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
  <v-bottom-sheet v-model="colord">
    <v-card flat style="margin: auto; touch-action: none; user-select: none;">
      <v-container fluid grid-list-md text-xs-center :style="{width:Math.min(size * 8, width) + 'px'}">
        <v-layout row wrap>
          <v-flex v-for="item in palette" :key="item" xs2 :style="{padding:size * 0.06 + 'px'}">
            <v-btn
              @click="color(item);"
              :color="item"
              block
              depressed
              style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;"
              :height="size"
            >
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
</v-bottom-sheet>
